<template>
  <div>
    <a-card class="card" title="数据列表">
      <a-input-search style="width:300px;margin-bottom:20px;" placeholder="输入账户名" enter-button="搜索" @search="onSearch" v-model="keyWord" allowClear/>
      <!-- <a-select v-model="dayType" style="margin-left:10px;width: 120px" @change="getDayType">
        <a-select-option :value="1">今日数据</a-select-option>
        <a-select-option :value="2">昨日数据</a-select-option>
      </a-select> -->
      <a-select v-model="campaignStatus" style="width: 180px;margin-left: 12px;" @change="changeCampaignStatus" v-if="dayType == 1">
        <a-select-option :value="-1">全部</a-select-option>
        <a-select-option :value="0">有效</a-select-option>
        <a-select-option :value="1">处于暂停时段</a-select-option>
        <a-select-option :value="2">暂停</a-select-option>
        <a-select-option :value="3">预算不足</a-select-option>
        <a-select-option :value="10">账户预算不足</a-select-option>
        <a-select-option :value="11">账户余额为零</a-select-option>
        <a-select-option :value="20">审核中</a-select-option>
        <a-select-option :value="21">审核不通过</a-select-option>
        <a-select-option :value="22">部分有效</a-select-option>
        <a-select-option :value="30">商品已失效</a-select-option>
      </a-select>
      <a-select value="操作" style="width: 120px;margin-left: 12px;" :disabled="selectedRowsForId.length == 0" @change="actionFunc">
        <a-select-option :value="1">暂停计划</a-select-option>
        <a-select-option :value="2">启动计划</a-select-option>
      </a-select>
      <a-button type="primary" @click="handle_export" style="margin-left:10px;" :loading="outputLoading">导出报表</a-button>
      <div>
        <standard-table
          showAlert
          rowKey="id"
          id="shujuListTable"
          :loading='loading'
          :columns="columns"
          :dataSource="dataSource"
          :expandedRowKeys='expandedRowKeys'
          :selectedRows.sync="selectedRowKeys"
          :pagination="{showTotal:total => `${dayType == 1? `更新于：${lastUpdateTime} ，`:``}共 ${total} 条数据`,showSizeChanger:true,pageSize: pageSize,pageSizeOptions:['10', '20', '30', '40', '50', '100']}"
          @selectedRowChange="selectedRowChange"
          @clear="onClear"
          @change="onChange"
          @onExpand="onExpand"
          :scroll="{ x: 800 }"
        >
          <div class="line1" slot="campaignNameStatus" slot-scope="{record}" style="cursor: pointer;">
            <a-tooltip>
              <template slot="title">
                {{record.campaignNameStatus}}
              </template>
              <span class="line1" style="width: 300px;display: block;">{{record.campaignNameStatus}}</span>
            </a-tooltip>
          </div>
          <div slot="impression" slot-scope="{record}">
            {{record.impression}} 
            <span v-if="showHB" :class="record.huanbi.impression>0?'fontGreen':'fontRed'">({{record.huanbi.impression}})</span>
          </div>
          <div slot="bidType" slot-scope="{record}">
            {{record.bidType | getBidType}} 
          </div>
          <div slot="budget" slot-scope="{record}" style="cursor: pointer;" >
            <BudgetView :bidType="record.bidType" :userName="record.userName" :campaignId="record.campaignId" :budget="record.budget" @change="init">
              {{record.budget == 0 ? '不限' : (record.budget).toFixed(2)}}
              <a-icon type="edit" />
            </BudgetView>
          </div>
          <div slot="schedule" slot-scope="{record}" style="cursor: pointer;" >
            <ScheduleView :scheduleStr="record.schedule" :userName="record.userName" :campaignId="record.campaignId" :campaignNameStatus="record.campaignNameStatus" @change="init"></ScheduleView>
          </div>
          <div slot="impressionHuanbi" slot-scope="{record}">
            {{record.huanbi.impression}}
          </div>
          <div slot="click" slot-scope="{record}">
            {{record.click}} 
            <span v-if="showHB" :class="record.huanbi.click>0?'fontGreen':'fontRed'">({{record.huanbi.click}})</span>
          </div>
          <div slot="clickHuanbi" slot-scope="{record}">
            {{record.huanbi.click}}
          </div>
          <div slot="ctr" slot-scope="{record}">
            {{(record.ctr*100).toFixed(2) + '%'}}
            <span v-if="showHB" :class="record.huanbi.ctr>0?'fontGreen':'fontRed'">({{record.huanbi.ctr}})</span>
          </div>
          <div slot="ctrHuanbi" slot-scope="{record}">
            {{record.huanbi.ctr}}
          </div>
          <div slot="pct" slot-scope="{record}">
            {{(record.pct).toFixed(2)}}
            <span v-if="showHB" :class="record.huanbi.pct>0?'fontGreen':'fontRed'">({{record.huanbi.pct}})</span>
          </div>
          <div slot="pctHuanbi" slot-scope="{record}">
            {{record.huanbi.pct}}
          </div>
          <div slot="act" slot-scope="{record}">
            {{(record.act).toFixed(2)}}
            <span v-if="showHB" :class="record.huanbi.act>0?'fontGreen':'fontRed'">({{record.huanbi.act}})</span>
          </div>
          <div slot="actHuanbi" slot-scope="{record}">
            {{record.huanbi.act}}
          </div>
          <div slot="cost" slot-scope="{record}">
            {{(record.cost).toFixed(2)}}
            <span v-if="showHB" :class="record.huanbi.cost>0?'fontGreen':'fontRed'">({{record.huanbi.cost}})</span>
          </div>
          <div slot="costHuanbi" slot-scope="{record}">
            {{record.huanbi.cost}}
          </div>
          <div slot="campaignStatus" slot-scope="{record}">
            <div style="display:flex;align-items: center;">
              <div style="width:6px;height:6px;border-radius:50%;background-color:#00cc63" v-if="record.campaignStatus==0"></div>
              <div style="width:6px;height:6px;border-radius:50%;background-color:#ff7875" v-else></div>
              <span style="margin-left:5px">{{record.campaignStatus | setStatus}}</span>
            </div>
          </div>
          <div slot="dsOcpcConversionsDetail80Cost" slot-scope="{record}">
            {{parseFloat(record.dsOcpcConversionsDetail80Cost).toFixed(2)}}
            <span v-if="showHB" :class="record.huanbi.dsOcpcConversionsDetail80Cost>0?'fontGreen':'fontRed'">({{record.huanbi.dsOcpcConversionsDetail80Cost}})</span>
          </div>
          <div slot="dsOcpcConversionsDetail80CostHuanbi" slot-scope="{record}">
            {{record.huanbi.dsOcpcConversionsDetail80Cost}}
          </div>
          <div slot="dsOcpcConversionsDetail80" slot-scope="{record}">
            {{(record.dsOcpcConversionsDetail80)}}
            <span v-if="showHB" :class="record.huanbi.dsOcpcConversionsDetail80>0?'fontGreen':'fontRed'">({{record.huanbi.dsOcpcConversionsDetail80}})</span>
          </div>
          <div slot="dsOcpcConversionsDetail80Huanbi" slot-scope="{record}">
            {{record.huanbi.dsOcpcConversionsDetail80}}
          </div>
          <div slot="dsOcpcConversionsDetail90" slot-scope="{record}">
            {{(record.dsOcpcConversionsDetail90)}} 
            <span v-if="showHB" :class="record.huanbi.dsOcpcConversionsDetail90>0?'fontGreen':'fontRed'">({{record.huanbi.dsOcpcConversionsDetail90}})</span>
          </div>
          <div slot="dsOcpcConversionsDetail90Huanbi" slot-scope="{record}">
            {{record.huanbi.dsOcpcConversionsDetail90}}
          </div>
          <div slot="dsOcpcConversionsDetail90Cost" slot-scope="{record}">
            {{parseFloat(record.dsOcpcConversionsDetail90Cost).toFixed(2)}} 
            <span v-if="showHB" :class="record.huanbi.dsOcpcConversionsDetail90Cost>0?'fontGreen':'fontRed'">({{record.huanbi.dsOcpcConversionsDetail90Cost}})</span>
          </div>
          <div slot="dsOcpcConversionsDetail90CostHuanbi" slot-scope="{record}">
            {{record.huanbi.dsOcpcConversionsDetail90Cost}}  
          </div>
        </standard-table>
      </div>
    </a-card>
  </div>
</template>

<script>
import {delBdAccount} from '@/api/xinxiliu/account'
import StandardTable from '@/components/table/StandardTable'
import BudgetView from './components/shujuList/BudgetView' 
import ScheduleView from './components/shujuList/ScheduleView' 
import {getCampaignReportToday, getCampaignReportToday2, updateCampaignPause, getLastUpdateTime} from '@/api/dianshang/dianshang'
// import shujuBingtu from './components/shujuBingtu'
// import * as echarts from 'echarts';
import FileSaver from 'file-saver';
import xlsx from 'xlsx';

const columns = [
  {
    title: '推广计划',
    width: 400,
    dataIndex: 'campaignNameStatus',
    scopedSlots: { customRender: 'campaignNameStatus' },
    fixed: 'left',
  },
  {
    title: '账户',
    width: 140,
    dataIndex: 'userName',
    fixed: 'left',
  },
  {
    title: '状态',
    width: 120,
    dataIndex: 'campaignStatus',
    scopedSlots: { customRender: 'campaignStatus' },
  },
  {
    title: '出价模式',
    width: 120,
    dataIndex: 'bidType',
    scopedSlots: { customRender: 'bidType' },
  },
  {
    title: '出价',
    width: 120,
    dataIndex: 'ocpcBid',
    scopedSlots: { customRender: 'ocpcBid' },
  },
  {
    title: '预算',
    width: 150,
    dataIndex: 'budget',
    scopedSlots: { customRender: 'budget' },
  },
  {
    title: '推广时段',
    width: 150,
    dataIndex: 'schedule',
    scopedSlots: { customRender: 'schedule' },
  },
  {
    title: '展现',
    width: 200,
    dataIndex: 'impression',
    scopedSlots: { customRender: 'impression' },
    sortDirections:['descend','ascend'],
    sorter: () => {},
  },
  {
    title: '点击',
    width: 200,
    dataIndex: 'click',
    scopedSlots: { customRender: 'click' },
    sortDirections:['descend','ascend'],
    sorter: () => {},
  },
  {
    title: '消费',
    width: 200,
    dataIndex: 'cost',
    defaultSortOrder: 'descend',
    scopedSlots: { customRender: 'cost' },
    sortDirections:['descend','ascend'],
    sorter: () => {},
  },
  {
    title: '点击率',
    width: 200,
    dataIndex: 'ctr',
    scopedSlots: { customRender: 'ctr' },
    sortDirections:['descend','ascend'],
    sorter: () => {},
  },
  {
    title: '直播成单成本',
    width: 200,
    dataIndex: 'dsOcpcConversionsDetail80Cost',
    scopedSlots: { customRender: 'dsOcpcConversionsDetail80Cost' },
    sortDirections:['descend','ascend'],
    sorter: () => {},
  },
  {
    title: '直播成单量',
    width: 200,
    dataIndex: 'dsOcpcConversionsDetail80',
    scopedSlots: { customRender: 'dsOcpcConversionsDetail80' },
    sortDirections:['descend','ascend'],
    sorter: () => {},
  },
  {
    title: '商品成单成本',
    width: 200,
    dataIndex: 'dsOcpcConversionsDetail90Cost',
    scopedSlots: { customRender: 'dsOcpcConversionsDetail90Cost' },
    sortDirections:['descend','ascend'],
    sorter: () => {},
  },
  {
    title: '商品成单量',
    width: 200,
    dataIndex: 'dsOcpcConversionsDetail90',
    scopedSlots: { customRender: 'dsOcpcConversionsDetail90' },
    sortDirections:['descend','ascend'],
    sorter: () => {},
  },
  
]

export default {
  name: 'account',
  components: {StandardTable, BudgetView, ScheduleView},
  data () {
    return {
      mod:'normal',

      advanced: true,
      columns: columns,
      selectedRows: [],
      loading:false,

      count:0,
      limit:10,
      page:1,
      dataSource: [],
      dataSourceTotal: [],
      keyWord:'',

      detail_id:0,
      expandedRowKeys:[],

      changeKey:'cost',
      changeOrder:'DESC',

      chartData:[],
      chartSelect:'cost',

      myChart:'',
      pageSize: 10,
      outputLoading:false,

      dayType:1,
      showHB: true,

      selectedRowKeys:[],
      selectedRowsForId:[],

      campaignStatus:-1,
      lastUpdateTime:'',
      showIcon: false,
      
    }
  },
  created() {
    this.init()
  },
  mounted(){
  },
  methods: {
    init(){
      if(this.dayType == 1){
        this.getUserData()
      }else if(this.dayType == 2){
        this.getUserData2()
      }
    },
    getUserData(){
      const _this = this;
      this.loading = true;
      let params = {
        column:this.changeKey,
        sortrule:this.changeOrder
      }
      this.selectedRowKeys = []
      getCampaignReportToday(params).then((res) => {  
        this.getLastUpdateTime()
        _this.loading = false;
        if(res.errcode == 0){
          let idx = 1
          for(let item of res.data){
            item.id = idx
            let huanbi = {
              act: this.getHuanbi(item,'act'),
              click: this.getHuanbi(item,'click'),
              cost: this.getHuanbi(item,'cost'),
              cpc: this.getHuanbi(item,'cpc'),
              dsOcpcConversionsDetail80: this.getHuanbi(item,'dsOcpcConversionsDetail80'),
              dsOcpcConversionsDetail90: this.getHuanbi(item,'dsOcpcConversionsDetail90'),
              dsOcpcConversionsDetail80Cost: this.getHuanbi(item,'dsOcpcConversionsDetail80Cost'),
              dsOcpcConversionsDetail90Cost: this.getHuanbi(item,'dsOcpcConversionsDetail90Cost'),
              ctr: this.getHuanbi(item,'ctr'),
              impression: this.getHuanbi(item,'impression'),
            }
            item.huanbi = huanbi
            idx++
          }
          // console.log(res.data) 
          _this.dataSource = res.data
          _this.dataSourceTotal = res.data
          _this.goSearch()
        }
      });
    },
    getUserData2(){
      const _this = this;
      this.loading = true;
      let params = {
        column:this.changeKey,
        sortrule:this.changeOrder
      }
      // 删除状态
      this.columns.splice(2, 1)
      // 昨日数据不需要选择器
      this.selectedRowKeys = null
      getCampaignReportToday2(params).then((res) => {
        _this.loading = false;
        if(res.errcode == 0){
          let idx = 1
          for(let item of res.data){
            item.id = idx
            let huanbi = {
              act: this.getHuanbi(item,'act'),
              click: this.getHuanbi(item,'click'),
              cost: this.getHuanbi(item,'cost'),
              cpc: this.getHuanbi(item,'cpc'),
              dsOcpcConversionsDetail80: this.getHuanbi(item,'dsOcpcConversionsDetail80'),
              dsOcpcConversionsDetail90: this.getHuanbi(item,'dsOcpcConversionsDetail90'),
              dsOcpcConversionsDetail80Cost: this.getHuanbi(item,'dsOcpcConversionsDetail80Cost'),
              dsOcpcConversionsDetail90Cost: this.getHuanbi(item,'dsOcpcConversionsDetail90Cost'),
              ctr: this.getHuanbi(item,'ctr'),
              impression: this.getHuanbi(item,'impression'),
            }
            item.huanbi = huanbi
            idx++
          }
          // console.log(res.data) 
          _this.dataSource = res.data
          _this.dataSourceTotal = res.data
          _this.goSearch()
        }
      });
    },
    getHuanbi(item,key){
      let today = item[key]?item[key]:0
      let yesdata = item.yesdata?item.yesdata[key]?item.yesdata[key]:0:0
      let huanbi = '-'
      if(yesdata != 0 && today != 0){
        huanbi = (today - yesdata)/yesdata*100
        huanbi = huanbi.toFixed(2)
      }else if(yesdata == 0 && today == 0){
        huanbi = 0
      }
      return huanbi + '%'
    },
    getLastUpdateTime(){
      getLastUpdateTime({}).then((res) => {
        if(res.errcode == 0){
          this.lastUpdateTime = res.data[1].lasttime
        }
      }).catch(() => {
        
      });
    },
    getDayType(val){
      this.campaignStatus = -1  // 复位状态筛选
      if(val == 1){
        this.getUserData()
      }else if(val == 2){
        this.getUserData2()
      }
    },
    goSearch(){
      let keyWord = this.keyWord
      let campaignStatus = this.campaignStatus
      let dataSourceTotal = JSON.parse(JSON.stringify(this.dataSourceTotal)) 
      if(keyWord == '' && campaignStatus == -1){
        this.dataSource = dataSourceTotal
      }else if(keyWord == '' && campaignStatus != -1){
        this.dataSource = dataSourceTotal.filter(o=>o.campaignStatus == campaignStatus)
      }else if(keyWord != '' && campaignStatus == -1){
        this.dataSource = dataSourceTotal.filter(o=>o.userName == keyWord)
      }else{
        this.dataSource = dataSourceTotal.filter(o=>o.userName == keyWord && o.campaignStatus == campaignStatus)
      }
    },
    onSearch(){
      this.goSearch()
    },
    changeCampaignStatus(){
      this.goSearch()
    },
    edit(id){
      this.detail_id = id
      this.mod = 'edit'
    },
    deleteRecord(id) {
      delBdAccount({id}).then(() => {
        this.$message.success('删除成功')
        this.init()
      });
    },
    onExpand(bool, row){
      if(bool){
        this.expandedRowKeys.push(row.id)
      }else{
        let idx = this.expandedRowKeys.findIndex(e=>e == row.id)
        this.expandedRowKeys.splice(idx,1)
      }
      console.log("onExpand", bool, row,this.expandedRowKeys)
    },
    getSorter(sorter){
      if(sorter.column){
        this.changeKey = sorter.column.dataIndex
        switch(sorter.order){
          case "ascend":
            this.changeOrder = 'ASC'
            break
          case "descend":
            this.changeOrder = 'DESC'
            break
        }
        this.init()
      }else{
        this.changeKey = ''
        this.changeOrder = ''
      }
    },
    changeCampaign(pause){
      let params = {
        pause: pause,
        campaignShoppingTypes:[]
      }
      params.campaignShoppingTypes = this.selectedRowsForId.map(e=>{
        return {
          campaignShoppingId: e.id,
          userName: e.userName,
        }
      })
      const hide = this.$message.loading('操作中')
      updateCampaignPause(params).then((res) => {
        hide()
        if(res.errcode == 0){
          this.init()
        }
      }).catch(() => {
        hide()
      });
    },
    actionFunc(value){
      switch(value){
        case 1:
          this.changeCampaign(1)
        break;
        case 2:
          this.changeCampaign(0)
        break;
      }
    },
    toggleAdvanced () {
      this.advanced = !this.advanced
    },
    remove () {
      this.dataSource = this.dataSource.filter(item => this.selectedRows.findIndex(row => row.key === item.key) === -1)
      this.selectedRows = []
    },
    onClear() {
      this.$message.info('您清空了勾选的所有行')
    },
    onStatusTitleClick() {
      this.$message.info('你点击了状态栏表头')
    },
    onChange(pagination, filters, sorter,) {
      console.log(pagination, filters, sorter)
      if(this.page == pagination.current){
        if(this.pageSize == pagination.pageSize){
          this.getSorter(sorter)
        }else{
          this.pageSize = pagination.pageSize
        }
      }
      this.page = pagination.current
      // this.init()
    },
    selectedRowChange(selectedRowKeys, selectedRows){
      // console.log('selectedRowChange',selectedRowKeys, selectedRows)
      this.selectedRowsForId = selectedRows.map(e=>{
        return {
          id: e.campaignId,
          userName: e.userName
        }
      })
    },
    onSelectChange() {
      this.$message.info('选中行改变了')
    },
    handleMenuClick (e) {
      if (e.key === 'delete') {
        this.remove()
      }
    },
    goXinxiliu(id,name){
      this.$store.commit('dianpu/setId',{id,name})  //保存id
      this.$router.push('/xinxiliu')
    },
    handle_export() {
      const _this = this
      this.outputLoading = true
      const changRowName = ['C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'k', 'L', 'M', 'N', 'O', 'P', 'Q', 'R']
      setTimeout(() => {
        this.setColumns()
        this.showHB = false
        this.selectedRowKeys = null
        this.pageSize = 9999
      }, 300);
      setTimeout(() => {
        var xlsxParam = {
          raw: true
        }; //转换成excel时，使用原始的格式，这样导出的时候数字过长不会变成科学计数法
        let workbook = xlsx.utils.book_new();
        let ws1 = xlsx.utils.table_to_sheet(document.querySelector('#shujuListTable'), xlsxParam);
        // 设置数字格式
        this.setType(changRowName, '2', 'n', ws1)
        let title = '计划日报表 ' + (_this.dayType == 1? '今日数据' : '昨日数据')
        // console.log(title)
        xlsx.utils.book_append_sheet(workbook, ws1, title);
        let wbout = xlsx.write(workbook, {
            bookType: 'xlsx',
            bookSST: true,
            type: 'array',
            defval: ' '
        });
        try {
          FileSaver.saveAs(
          new Blob([wbout], {
              type: 'application/octet-stream;charset=utf-8"'
          }), title + '.xlsx');
        } catch (e) {
          if (typeof console !== 'undefined') console.log(e, wbout);
        }finally{
          this.pageSize = 10
          this.outputLoading = false
          this.restoreColumns()
          this.showHB = true
          this.selectedRowKeys = []
        }
        return wbout;
      }, 600);
    },
    setColumns(){
      let _columns = JSON.parse(JSON.stringify(columns))
      let main_list = ['campaignNameStatus', 'userName','impression', 'click', 'ctr', 'pct', 'act', 'cost','dsOcpcConversionsDetail80Cost', 'dsOcpcConversionsDetail80', 'dsOcpcConversionsDetail90Cost', 'dsOcpcConversionsDetail90']
      let list = ['impression', 'click', 'ctr', 'pct', 'act', 'cost','dsOcpcConversionsDetail80Cost', 'dsOcpcConversionsDetail80', 'dsOcpcConversionsDetail90Cost', 'dsOcpcConversionsDetail90']
      let newColumns = []
      for(let item of _columns){
        let main_f = main_list.find(e=>item.dataIndex == e)
        if(main_f){
          newColumns.push({
            title: item.title,
            dataIndex: item.dataIndex,
            width:200,
            fixed:false,
            scopedSlots: { customRender: item.dataIndex},
          })  
        }
        let f = list.find(e=>item.dataIndex == e)
        if(f){
          newColumns.push({
            title: item.title + '环比',
            dataIndex: item.dataIndex + 'Huanbi',
            width:200,
            scopedSlots: { customRender: item.dataIndex + 'Huanbi' },
          })
        }
      }
      this.columns = newColumns
    },
    setType(changRowName, startIndex, type, ws){
      // 批量修改导出报表类型
      for(let rowName of changRowName){
        let idx = startIndex
        let obj = ws[rowName + idx]
        while(obj){
          obj.t = type
          idx ++ 
          obj = ws[rowName + idx]
        }
      }
    },
    restoreColumns(){
      // 还原Columns
      this.columns = columns
    }
  },
  watch:{
    mod(e){
      if(e=='normal'){
        this.init()
      }
    }
  },
  filters:{
    getStatus(e){
      switch(e){
        case 1:case '1':
          return '正常'
        case 2:case '2':
          return '异常'
      }
    },
    setStatus(e){
      switch(e){
        case 0: case '0':
          return '有效'
        case 1: case '1':
          return '处于暂停时段'
        case 2: case '2':
          return '暂停'
        case 3: case '3':
          return '预算不足'
        case 10: case '10':
          return '账户预算不足'
        case 11: case '11':
          return '账户余额为零'
        case 20: case '20':
          return '审核中'
        case 21: case '21':
          return '审核不通过'
        case 22: case '22':
          return '部分有效'
        case 30: case '30':
          return '商品已失效'
        default:
          return '未知'
      }
    },
    getBidType(e){
      switch(e){
        case 1: case '1':
          return '控成本模式'
        case 4: case '4':
          return '放量模式'
        default:
          return '未知'
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .line1{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .fontGreen{
    margin-left: 10px;
    color: #41b883;
  }
  .fontRed{
    margin-left: 10px;
    color: #c96168;
  }
  .card{
    margin-bottom: 20px;
  }
  .search{
    margin-bottom: 54px;
  }
  .fold{
    width: calc(100% - 216px);
    display: inline-block
  }
  .operator{
    margin-bottom: 18px;
  }
  @media screen and (max-width: 900px) {
    .fold {
      width: 100%;
    }
  }
</style>





